<!doctype html>
<html>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
        
    <style type='text/css'>
        html { font-family:Helvetica; color:#ddd; }
        h1 { color:steelblue; font-size:24pm; margin-top:24px; }
        button { margin:0 3px 10px; font-size:2pm; }
        .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11pm; }
        div{color: black;line-height:100%;border-color: #ccc; border-width:1px;}
        </style>
</head>
<body>
    <h1>Demo</h1>
    <h2>WebViewJavascriptBridge</h2>
    <div id='buttons'>buttons</div><br/>
    <div id='log'>log</div><br/>
    
    <script>
    	// <!-- 错误处理 -->
        window.onerror = function(err) {
            log('window.onerror: ' + err)
        }

	    function log(message, data) {
	        var log = document.getElementById('log')
	        var el = document.createElement('p')
	        el.className = 'logLine'
	        el.innerHTML = message + (data ? ':<br/>' + JSON.stringify(data) : '')
	        if (log.children.length) { log.insertBefore(el, log.children[0]) }
	        else { log.appendChild(el) }
	    }
		
		// --------------------------
	    <!-- button标签创建，插入 -->
	    document.getElementById('buttons').appendChild(document.createElement('br'))
	    var button = document.getElementById('buttons').appendChild(document.createElement('button'))
	    button.innerHTML = '发信息到 OC with parameters'
	    button.onclick = function(e) {
	        e.preventDefault();
	        var data = 'Hello from JS button';
	        log('JS sending message', data);
	        window.external.test1(data, 'haha');//调用原生代码
	    }

	    document.body.appendChild(document.createElement('br'))

	    var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
	    callbackButton.innerHTML = '发送 testObjcCallback js:test2'
	    callbackButton.onclick = function(e) {
	        e.preventDefault()
	        log('JS calling handler "testObjcCallback"');
	        window.external.test2();
	    }
        
    </script>
</body>
</html>
